import React, { Component } from 'react';
import { NavBar, Form, Button, Input, Cascader, List, Switch,Toast } from 'antd-mobile'
import '../styles/AddAddress.scss'
import * as service from '../api/index'

class AddAddress extends Component {
    constructor(props) {
        super(props)
        this.state = {
            options: [
                {
                    label: '浙江省',
                    value: '浙江省',
                    children: [
                        {
                            label: '杭州市',
                            value: '杭州市',
                            children: [
                                {
                                  label: '西湖区',
                                  value: '西湖区',
                                },
                                {
                                  label: '上城区',
                                  value: '上城区',
                                },
                                {
                                  label: '余杭区',
                                  value: '余杭区',
                                },
                              ],
                        },
                        {
                            label: '温州市',
                            value: '温州市',
                            children: [
                                {
                                  label: '鹿城区',
                                  value: '鹿城区',
                                },
                                {
                                  label: '龙湾区',
                                  value: '龙湾区',
                                },
                                {
                                  label: '瓯海区',
                                  value: '瓯海区',
                                },
                              ],
                        }
                    ]
                },
                // {
                //     label: '安徽省',
                //     value: '安徽省',
                //     children: [
                //         {
                //             label: '合肥市',
                //             value: '合肥市',
                //             children: [
                //                 {
                //                   label: '包河区',
                //                   value: '包河区',
                //                 },
                //                 {
                //                   label: '蜀山区',
                //                   value: '蜀山区',
                //                 },
                //                 {
                //                   label: '瑶海区',
                //                   value: '瑶海区',
                //                 },
                //               ],
                //         },
                //         {
                //             label: '芜湖市',
                //             value: '芜湖市',
                //             children: [
                //                 {
                //                   label: '镜湖区',
                //                   value: '镜湖区',
                //                 },
                //                 {
                //                   label: '弋江区',
                //                   value: '弋江区',
                //                 },
                //                 {
                //                   label: '湾沚区',
                //                   value: '湾沚区',
                //                 },
                //               ],
                //         },
                //     ],
                // },
            ],
            visible: false,
            city:[],
            isDefault:null
        }
    }

    async toaddress(values){
        console.log(values);
        // 新增地址
        var res = await service.address_add({token:localStorage.getItem('token'),userid:localStorage.getItem('userid'),name:values.name,tel:values.tel,province:this.state.city[0],city:this.state.city[1],county:this.state.city[2],addressDetail:values.addressDetail,isDefault:this.state.isDefault})
        if(res.data.code==200){
            Toast.show({
                icon: 'success',
                content: res.data.message,
              })
            this.props.history.push('/address')
        }
    }

    render() {
        return (
            <div className='addaddress'>
                <NavBar onBack={() => { this.props.history.go(-1) }}>添加地址</NavBar>
                <div className="main">
                    <Form requiredMarkStyle='none' layout='horizontal' mode='card'
                        onFinish={(values) => {
                            this.toaddress(values)
                        }}
                        footer={
                            <Button block type='submit' color='danger' size='large' shape='rounded'>
                                保存
                            </Button>
                        }>
                        <Form.Item
                            name='name'
                            label='姓名'
                            rules={[{
                                required: true,
                                message: '请填写姓名'
                            }]}
                        >
                            <Input placeholder='姓名' />
                        </Form.Item>
                        <Form.Item
                            name='tel'
                            label='电话'
                            rules={[{
                                pattern: /^1[3-9]\d{9}$/,
                                required: true,
                                message: '请填写正确的电话'
                            }]}
                        >
                            <Input placeholder='电话' />
                        </Form.Item>
                        <Form.Item
                            name='adress'
                            label='地区'
                            onClick={() => { this.setState({ visible: true }) }}
                        >
                            <Cascader
                                options={this.state.options}
                                visible={this.state.visible}
                                onClose={() => {
                                    this.state.visible = false
                                    this.setState({ visible: this.state.visible })
                                }}
                                onSelect={(val, extend) => {
                                    // console.log('onSelect', val, extend.items)
                                    this.setState({city:val})
                                }}
                            >
                                {items => {
                                    if (items.every(item => item === null)) {
                                        return '地区'
                                    } else {
                                        return items.map(item => item?.label ?? '未选择').join('/')
                                    }
                                }}
                            </Cascader>
                        </Form.Item>
                        <Form.Item
                            name='addressDetail'
                            label='详细地址'
                            rules={[{
                                required: true,
                                message: '请填写详细地址'
                            }]}
                        >
                            <Input placeholder='详细地址' />
                        </Form.Item>
                        <List>
                            <List.Item extra={<Switch onChange={(val)=>{
                                this.setState({isDefault:val})
                            }} />}>设置为默认收货地址</List.Item>
                        </List>
                    </Form>
                </div>
            </div>
        );
    }
}

export default AddAddress;